<template>
<div id="app">
    <el-form :inline="true" :model="formSelect" class="demo-form-inline" ref="formSelect">
        <el-form-item label="隶属部门" prop="topDeptName">
            <el-select size=" small" v-model="formSelect.topDeptName" filterable clearable placeholder="隶属部门" @change="topDeptChange">
                <el-option :key=" item.departmentNumber" v-for="item in topDepts" :label="item.departmentName" :value="item.departmentNumber">
                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="直属部门" prop="deptName">
            <el-select size="small" v-model="formSelect.deptName" filterable clearable placeholder="直属部门">
                <el-option :key="item.departmentNumber" v-for="item in depts" :label="item.departmentName" :value="item.departmentNumber"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="姓名" prop="teacherName">
            <el-input size="small" v-model="formSelect.teacherName" clearable placeholder="姓名"></el-input>
        </el-form-item>

        <el-form-item label="职工号" prop="teacherNumber">
            <el-input size="small" v-model="formSelect.teacherNumber" clearable placeholder="职工号"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button size="small" type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
            <el-button size="small" @click="resetForm('formSelect')">重置</el-button>
        </el-form-item>
    </el-form>

    <el-table :data="dataList" border v-loading="dataListLoading" style="width: 100%">
        <el-table-column type="index" header-align="center" align="center" label="序号" width="50"></el-table-column>
        <el-table-column prop="number" header-align="center" align="center" label="职工号"></el-table-column>
        <el-table-column prop="name" header-align="center" align="center" label="姓名"></el-table-column>
        <el-table-column header-align="center" align="center" :show-overflow-tooltip="true" label="性别">
            <template v-slot="scope">
                <span v-if="scope.row.sex == 1">男</span>
                <span v-else-if="scope.row.sex == 2">女</span>
                <span v-else>默认</span>
            </template>
        </el-table-column>
        <el-table-column prop="topDeptName" header-align="center" align="center" :show-overflow-tooltip="true" label="隶属部门"></el-table-column>
        <el-table-column prop="deptName" header-align="center" align="center" :show-overflow-tooltip="true" label="直属部门"></el-table-column>
        <el-table-column prop="phone" header-align="center" align="center" label="手机号"></el-table-column>
        <el-table-column prop="type" header-align="center" align="center" :show-overflow-tooltip="true" label="教师类型">
        </el-table-column>
        <el-table-column prop="status" header-align="center" align="center" :show-overflow-tooltip="true" label="教师状态">
        </el-table-column>
        <el-table-column label="操作" header-align="center" align="center">
            <template slot-scope="scope">
                <el-button slot="reference" size="mini" type="primary" @click="rPassword(scope.row.id)">重置密码</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination class="pagination" background @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
</div>
</template>

<script>
import {
    getData,
    getTopDeptList,
    getDeptList,
    userRegister,
    userUpdata,
    userUpdataPass,
    getDepartmentListByCollege,
} from '../../api/src/archives_server/teacher_archives.js'

import {
    mapGetters
} from 'vuex'

import {
    resetPassWord
} from '../../api/src/archives_server/teachingClassStudent_archives.js'
export default {
    name: '',
    computed: {
        ...mapGetters(['name', 'number']),
    },
    data() {
        return {
            isEnabled: true,
            formSelect: {
                topDeptName: '',
                deptName: '',
                name: '',
                number: '',
                phone: '',
            },
            updateFormCk: false,
            registerFormCk: false,
            updatePasswordFormCk: false,
            registerForm: {
                topDeptName: '',
                deptName: '',
                name: '',
                number: '',
                sex: '',
            },
            type: '',
            dataList: [],
            topDepts: [],
            depts: [],
            pageIndex: 1,
            pageSize: 10,
            totalPage: 0,
            dataListLoading: false,
            selectionDataList: [],
            filter: {
                deptNumber: '',
                topDeptNumber: '',
                name: '',
                teacherName: '',
                department: '',
                teacherNumber: '',
            },
            drawer: false,
            ck: false,
        }
    },
    created() {
        this.getDataList(false)
        this.getTopDepts()
        this.getDepts()
    },
    methods: {
        // 获取数据列表
        getDataList(ck) {
            this.dataListLoading = true
            console.log('这里的filter为', this.filter)
            if (ck == false) {
                // 不进行选择默认
                getData(this.pageIndex, this.pageSize).then((res) => {
                    if (res.records === 0) {
                        this.dataList = []
                        this.totalPage = 0
                    } else {
                        this.dataList = res.records
                        this.totalPage = res.total
                    }
                    this.dataListLoading = false
                    console.log('没有选择的数据', res.records)
                })
            } else {
                // 进行选择

                getData(this.pageIndex, this.pageSize, this.filter).then((res) => {
                    if (res.records === 0) {
                        this.dataList = []
                        this.totalPage = 0
                    } else {
                        this.dataList = res.records
                        this.totalPage = res.total
                    }
                    this.dataListLoading = false
                    console.log('进行选择后的数据', res.records)
                })
            }
        },
        write(type) {
            this.registerForm.collegeNumber = ''
            this.registerForm.departmentName = ''
            this.registerForm.name = ''
            this.registerForm.number = ''
            this.registerForm.sex = ''
            this.parentDepartment = []
            this.type = type
            if (type == '用户注册') {
                this.registerFormCk = true
            }
            this.drawer = true
        },
        async getTopDepts() {
            const data = await getTopDeptList()
            this.topDepts = data
        },
        async getDepts(number) {
            const data = await getDeptList(number)
            this.depts = data
        },
        //部门输入框改变
        topDeptChange(val) {
            this.getDepts(val)
        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
            this.pageIndex = 1
            this.getDataList(false)
        },
        //判断哪里输入了值
        onSubmit() {
            this.dataList = []
            this.pageIndex = 1
            this.filter = {}
            this.ck = false
            let data
            if (this.formSelect.topDeptName != null) {
                data = {
                    topDeptNumber: this.formSelect.topDeptName,
                }
                this.filter = Object.assign({}, this.filter, data)
                this.ck = true
            }
            if (this.formSelect.deptName != null) {
                data = {
                    deptNumber: this.formSelect.deptName,
                }
                this.filter = Object.assign({}, this.filter, data)
                this.ck = true
            }
            if (this.formSelect.teacherName != null) {
                data = {
                    teacherName: this.formSelect.teacherName,
                }
                this.filter = Object.assign({}, this.filter, data)
                this.ck = true
            }
            if (this.formSelect.teacherNumber != null) {
                data = {
                    teacherNumber: this.formSelect.teacherNumber,
                }
                this.filter = Object.assign({}, this.filter, data)
                this.ck = true
            }

            this.getDataList(this.ck)
        },
        // 取消抽屉
        cancelForm() {
            this.drawer = false
        },
        // 每页数
        sizeChangeHandle(val) {
            this.dataList = []
            this.pageSize = val
            // this.pageIndex = 1
            this.getDataList(this.ck)
        },
        // 当前页
        currentChangeHandle(val) {
            this.dataList = []
            this.pageIndex = val
            this.getDataList(this.ck)
        },
        rPassword(id) {
            this.getDataList(false)
            this.$confirm('确定重置密码?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                .then(() => {
                    console.log(this.dataList)
                    let n = 0
                    for (let i = 0; i < this.dataList.length; i++) {
                        if (this.dataList[i].id == id) {
                            n = i
                        }
                    }
                    let number = this.dataList[n].number.toString()
                    console.log(number)
                    resetPassWord(number).then((res) => {
                        console.log(1)
                        this.$message({
                            showClose: true,
                            message: '恭喜你，重置密码成功！',
                            type: 'success',
                        })
                    })
                })
                .catch(() => {})
        },
    },
}
</script>

<style></style>
